ブラウザ JS だけで PNG をデコードする
Compression Streams API のデモンストレーションとして…
解説 https://developer.mozilla.org/en-US/docs/Web/API/Compression_Streams_API
クソ遅いので実用とかベンチマークとかそういうのはないです
なんかできた https://clutter.ikuta.me/png-decode
https://gyazo.com/a42d573030c37fd7094dc6f7035dd971
流れ
<input type="file"> でもらったファイルを FileReader で読んで、ブロックごとにパース
マジックナンバーのチェックも
IHDR で色々読む
色々読めるけど色モードと画像の幅だけ取れればまあ良い
インターレースとパレットは無視
あんま使われてなさそうなので
DecompressionStream を作る
IDAT チャンクがきたら DecompressionStream に書く
ファイル末尾までいく
DecompressionStream から全部読み出す
deflate 展開すると (画像の幅 + 1(フィルタ識別子)) * 画像の高さ * ピクセルあたりのバイト数（RGBAなら4）の配列が得られる
new imageData() する
行ごとにフィルタ処理かけて ImageData に書き込み
<canvas> に putImageData
クソ重いので適度に Web Worker に流して UI がブロックされないようにしておきました
改善の余地
PNG デコーダも Stream として書けないか？
pipeThrough で全てが完結する世界線になりたい